<!--头部公共部分-->
{include file="common/header" /}
<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>设置</a>
        <a>
          <cite>系统用户管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
    <div class="layui-row"
         style="padding-left:20px;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
        <div class="layui-form layui-col-md12 x-so layui-form-pane">
            <div class="layui-input-inline">
                <input type="number" name="mobile" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
            </div>
            {if $type == 1}
            <div class="layui-input-inline">
                <select name="company_id" lay-verify="required" lay-search="">
                    <option value="">请选择集团</option>
                    {volist name="company" id="company"}
                    <option value="{$company.id}">{$company.company_name}</option>
                    {/volist}
                </select>
            </div>
            {/if}
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">请选状态</option>
                    <option value="1">启用中</option>
                    <option value="0">禁用中</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="status_center">
                    <option value="">请选绑定状态</option>
                    <option value="1">已绑定</option>
                    <option value="0">未绑定</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search"></i>筛选</button>
                <button class="layui-btn layui-btn-danger" id="clear">
                    <i class="layui-icon"></i>重置</button>
                <button class="layui-btn" id="add">
                    <i class="layui-icon layui-icon-add-circle-fine"></i>新增集团用户</button>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="LAY_table_user" lay-filter="table"></table>
    <script type="text/html" id="barTable">
<!--        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="upload">头像</a>-->
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>{{# if(d.status == 0){ }}
        <a class="layui-btn layui-btn-xs" style="background-color: #009688" lay-event="check">激活</a>{{# } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="check">禁用</a>{{# } }}
        {{# if(d.groupId > 2){ }}{{# } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        {{# } }}
        <a class="layui-btn layui-btn-xs" style="background-color: #009688" lay-event="reset">密码重置</a>
    </script>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
    layui.use(['table','element', 'layer', 'laytpl','upload'], function () {
        var $ = layui.$,
            table = layui.table,
            layer = layui.layer,
            element = layui.element,
            upload = layui.upload,
            laytpl = layui.laytpl;

        var type = '{$type}';
        $('#add').click(function () {

            if(type == 1){
                layer.open({
                    type: 2,
                    skin: 'layui-layer-lan',
                    closeBtn: 2,
                    title: '选择集团',
                    area: ['50%', '60%'],
                    shadeClose: false,
                    content: "{:url('User/company')}?status=" + 2
                });
            }else{
                var url = '{:url("User/add")}';
                layer.open({
                    type: 2,
                    title: '新增集团用户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['95%', '95%'],
                    content: url
                });

            }

        });
        var loading = layer.load();
        //数据表格 方法级渲染
        var tableIns = table.render({
            elem: '#LAY_table_user',
            url: '{:url("User/lists")}'
            , method: 'POST'
            , height: 315
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
            if (res.code === 1) {
                res.code = 0;
            } else {
                res.code = -1;
            }
            return {
                "code": res.code, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.data //解析数据列表
            };
            },
            cols: [[
                {field: 'mobile', title: '手机号码', width: 180, align: 'center'
                }, {field: 'name', title: '姓名', width: 200, align: 'center'
                }, {field: 'img', title: '头像', width: 100, align: 'center'
                }, {field: 'company_name', title: '集团名称', width: 200, align: 'center'
                }, {field: 'wx_status',style:'color:#01AAED;font-weight: bold;', title: '绑定小程序', width: 200, align: 'center'
                }, {field: 'gender', title: '性别', width: 70, align: 'center'
                }, {field: 'title', title: '用户组', width: 200, align: 'center'
                }, {field: 'group_type_text', title: '用户组属性', width: 200, align: 'center'
                }, {field: 'status_text', title: '状态', width: 100, align: 'center'
                }, {field: 'create_time', title: '创建时间', width: 200, align: 'center'
                }, {field: 'last_login', title: '最近登录时间', width: 200, align: 'center'
                }, {field: 'last_ip', title: '最近登陆IP', width: 200, align: 'center'
                }, {fixed: 'right', title: '操作', width: 300, align: 'center', toolbar: '#barTable'}
            ]]
            , height: 'full-180'
            , page: true
            , done: function () {
                $("[data-field='id']").css('display','none');
                layer.close(loading);
        }
        });
        //监听工具条
        table.on('tool(table)', function (obj) {
            var data = obj.data; //获得当前行数据
            console.log(data)
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'upload') {
                var url = '{:url("User/upload_img")}?id=' + data.id;
                layer.open({
                    type: 2,
                    title: '上传头像',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['50%', '50%'],
                    content: url
                });
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除么', function (index) {
                    $.post("{:url('User/del')}", {
                        id: data.id
                    }, function (result) {
                        if (result.code === 1) {
                            layer.msg(result.msg, {
                                time: 2000
                            });
                            setTimeout(function () {
                                obj.del(); //删除对应行（tr）的DOM结构
                                location.reload();
                            }, 2000)
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                    }, "json")
                });
            } else if (layEvent === 'edit') {
                //编辑
                //do something
                var url = '{:url("User/edit")}?id=' + data.id;
                layer.open({
                    type: 2,
                    title: '修改',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['95%', '98%'],
                    content: url
                });
            } else if (layEvent === 'check') {
                var status;
                if (data.status == 0) {
                    status = 1;
                } else {
                    status = 0;
                }
                //激活与禁用状态改变
                $.post("{:url('User/user_status')}", {
                    id: data.id,
                    status: status
                }, function (rJson) {
                    if (rJson.code === 1) {
                        layer.msg(rJson.msg, {
                            time: 2000
                        });
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        layer.msg(rJson.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, "json")
            } else if (layEvent === 'reset') {
                //密码重置
                $.post("{:url('User/user_reset')}", {
                    id: data.id
                }, function (rJson) {
                    if (rJson.code === 1) {
                        layer.msg(rJson.msg, {
                            time: 2000
                        });
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        layer.msg(rJson.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, "json")
            }
        });
        //搜索项
        $('#search').click(function () {
            var field = {};
            field.status = $('select[name=status] option:selected').val();
            field.status_center = $('select[name=status_center] option:selected').val();
            field.company_id = $('select[name=company_id] option:selected').val();
            field.username = $('input[name=username]').val();
            field.mobile = $('input[name=mobile]').val();
            console.log(field);
            tableIns.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });//清除
        $('#clear').click(function () {
            $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns.reload({
                where: {
                    'username': '',
                    'company_id': '',
                    'status': '',
                    'status_center': '',
                    'mobile': ''
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>